<template>
  <div>
    <el-dialog :visible.sync="value" v-if="tableData.length>100" :before-close="cancel" append-to-body title="警告" @close="cancel">
      <div class="dialog-footer">
        <div class="dialog-footer__text">未阅读当前站内信的用户数量过多，如果查看可能导致页面较长时间卡顿，是否仍然继续？</div>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="insideDialogFlag = true;">确定</el-button>
          <el-button @click="value = false">取 消</el-button>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="insideDialogFlag"  v-if="insideDialogFlag" append-to-body title="未读用户" @close="cancel">
      <div class="createPost-container">
        <span v-if="index<tableData.length-1" v-for="(item,index) in tableData" :key="index">{{item + ','}}</span>
        <span v-else>{{item}}</span>
        <!--<el-form-->
        <!--class="form-container"-->
        <!--:model="filters"-->
        <!--ref="refForm"-->
        <!--label-width="100px"-->
        <!--:inline="true"-->
        <!--&gt;-->
        <!--<el-form-item label="会员账号">-->
        <!--<el-input-->
        <!--type="textarea"-->
        <!--:rows="1"-->
        <!--maxlength="45"-->
        <!--class="article-textarea"-->
        <!--autosize-->
        <!--placeholder="请输入会员账号"-->
        <!--v-model="filters.memberAccount"-->
        <!--&gt;</el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="是否已读">-->
        <!--<el-select v-model="filters.isRead">-->
        <!--<el-option-->
        <!--v-for="item in consts.IS_MEMBER_READ"-->
        <!--:key="item.value"-->
        <!--:label="item.title"-->
        <!--:value="item.value"-->
        <!--&gt;</el-option>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <!--<el-button type="primary" v-waves icon="el-icon-search" @click="gridSearch">搜索</el-button>-->
        <!--</el-form>-->
        <!--<el-table-->
        <!--:data="tableData.list"-->
        <!--v-loading="loading"-->
        <!--element-loading-text="给我一点时间"-->
        <!--border-->
        <!--fit-->
        <!--highlight-current-row-->
        <!--style="width: 100%"-->
        <!--&gt;-->
        <!--<el-table-column label="会员账号" align="center">-->
        <!--<template slot-scope="{row}">-->
        <!--<span class="text-nowrap">{{row.userName}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="是否已读" align="center">-->
        <!--<template slot-scope="{row}">-->
        <!--<span class="text-nowrap">{{row.isRead | toConverter('IS_MEMBER_READ') }}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->
        <!--<div class="pagination-container">-->
        <!--<el-pagination-->
        <!--background-->
        <!--@size-change="gridSizeChange"-->
        <!--@current-change="gridCurrentChange"-->
        <!--:current-page="filters.page"-->
        <!--:page-sizes="gridPageSize"-->
        <!--:page-size="filters.size"-->
        <!--:layout="gridLayout"-->
        <!--:total="tableData.total"-->
        <!--&gt;</el-pagination>-->
        <!--</div>-->
        <!-- <el-button class="filter-item" type="primary" icon="el-icon-search" @click="cancel">关闭</el-button> -->
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { noticeLetterIsreadListApi } from '@/services/api/notice';
import { dialog } from '@/build';
import getCommand from '@/mixins/getCommand';

export default {
  name: 'check-isread-member',
  components: {},
  mixins: [dialog, getCommand],
  props: ['value', 'id', 'rowData'],
  data() {
    return {
      outsideDialogFlag: false,
      insideDialogFlag: false,
      filters: {
        id: String(this.id),
        // memberAccount: undefined,
        // isRead: -1,
        // page: 1,
        // size: 20,
      },
      // tableData: {
      //   // list: [],
      //   // total: 0,
      // },
      tableData: [],
    };
  },
  computed: {},
  mounted() {
    this.getUnReadmenber();
  },
  methods: {
    getUnReadmenber() {
      // this.tableData = [];
      this.bindGet(noticeLetterIsreadListApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        callback: ([result, data]) => {
          if (result) {
            this.tableData = data;
            if (data.length < 100) {
              this.insideDialogFlag = true;
              this.value = false;
            } else {
              this.insideDialogFlag = false;
              this.value = true;
            }
          }
        },
      });
      this.doGet({ action: 'getGrid' });
    },
    cancel() {
      this.$emit('input', false);
    },
  },
};
</script>

<style lang="scss" scoped>
  .createPost-container {
    max-height:60vh;
    overflow: auto;
    word-break: break-all;
    line-height: 40px;
    span{
      display: inline-block;
      padding: 0 8px;
    }
  }
  .dialog-footer__text{
    margin-bottom: 30px;
  }
.image {
  width: 100px;
  height: 100px;
}

</style>
